<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            width: 100px;
            background: red;
        }
    </style>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            //eq方法  默认从0开始查找
//            $('li').eq(2).css('color','red');
            //gt 大于某个数   lt 小于某个数
//            $('li:gt(3)').css('color','yellow');
//            $('li:lt(4)').css('color','blue');
            //even 偶数行  odd 奇数行
//            $('li:even').css('color','pink');
//            $('li:odd').css('color','orange');
            //点击当前 li 其他li 变成红色
//            $('li').on('click',function () {
//                $(this).siblings().css('color','red');
//            })

            $('li').on('click',function () {
                $(this).addClass('red').siblings().removeClass('red');
            })
        })
    </script>
</head>
<body>
<ul>
    <li>刘备</li>
    <li>赵云</li>
    <li>关于</li>
    <li>张飞</li>

    <li>孙权</li>
    <li>周瑜</li>
    <li>黄盖</li>
    <li>大乔</li>
</ul>
</body>
</html>